<template>
  <ant-modal
    modalWidth="1360"
    modalHeight="600"
    :visible="open"
    v-if="open"
    :modal-title="formTitle"
    :adjust-size="true"
    :maskClosable="false"
    @cancel="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules" slot="content" layout="vertical">
      <a-spin :spinning="loading">
        <biz-product
          v-if="showProductModal"
          ref="bizProduct"
          @ok="selectProduct"
          @close="showProductModal = false"
        />
        
        <biz-project-form ref="BizProjectForm" @ok="projectOk"></biz-project-form>
        <a-row :gutter="32">
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="项目编号">
              <a-input @focus="projectFocus" v-model="form.projectNumber"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="订单编号">
              <!--<a-input v-model="form.orderNumber" readOnly v-if="form.id" />-->
              <a-input v-model="form.orderNumber" placeholder="编号自动生成"  :disabled="form.auditStatus >= 2 || form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="客户" prop="customerId">
              <a-select
                :disabled="form.auditStatus > 1 || form.view"
                placeholder="请选择客户"
                v-model="form.customerId"
                :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body
                }
              "
                style="width: 100%"
                allow-clear
                show-search
                optionFilterProp="children"
                @change='changeCustomer'
              >
                <a-select-option v-for="(d, index) in customerIdOptions" :key="index" :value="d.id">{{ d.customerName }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="下单日期" prop="orderDate">
              <a-date-picker
                v-model="form.orderDate"
                valueFormat="YYYY-MM-DD"
                :show-today="true"
                placeholder="选择日期"
                style="width: 100%"
                :disabled="cannotEdit || form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="送货地址" prop="address">
              <a-input v-model="form.address" placeholder="请输入送货地址" :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="业主电话" prop="phone">
              <a-input v-model="form.phone" placeholder="请输入业主电话" :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="安装时间" prop="installDate">
              <a-date-picker

                v-model="form.installDate"
                valueFormat="YYYY-MM-DD"
                :show-today="true"
                placeholder="选择日期"
                style="width: 100%"
                :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8" >
            <a-form-model-item label="业务员">
              <select-user
                v-model="form.customernanObj"
                select-model="single"
                placeholder="请选择业务员"
                :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8" >
            <a-form-model-item label="测量员" prop="billerObj">
              <select-user
                v-model="form.billerObj"
                select-model="single"
                :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="开单日期" prop="receiveDate">
              <a-date-picker
                v-model="form.receiveDate"
                valueFormat="YYYY-MM-DD"
                :show-today="true"
                placeholder="选择日期"
                style="width: 100%"
                :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8" >
            <a-form-model-item label="清账发货" prop="isSettleSend">
              <a-select
                :disabled="cannotEdit|| form.view"
                placeholder="请选择清账发货"
                v-model="form.isSettleSend"
                :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body
                }
              "
                style="width: 100%"
                allow-clear>
                <a-select-option v-for="(d, index) in isSettleSendOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8" >
            <a-form-model-item label="订单类型" prop="orderType">
              <a-select
                :disabled="form.auditStatus > 1 || form.view"
                placeholder="请选择订单类型"
                v-model="form.orderType"
                style="width: 100%"

                allow-clear>
                <a-select-option v-for="(d, index) in orderTypeOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8" >
            <a-form-model-item label="配送模式" prop="deliveryType">
              <a-select
                :disabled="cannotEdit|| form.view"
                placeholder="请选择配送模式"
                v-model="form.deliveryType"
                style="width: 100%"
                allow-clear>
                <a-select-option v-for="(d, index) in deliveryOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8" >
            <a-form-model-item label="安装模式" prop="installType">
              <a-select
                :disabled="cannotEdit|| form.view"
                placeholder="请选择安装模式"
                v-model="form.installType"
                style="width: 100%"
                allow-clear>
                <a-select-option v-for="(d, index) in installOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="备注1" prop="remark">
              <a-input v-model="form.remark" placeholder="请输入备注1" :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="备注2" prop="remarkA">
              <a-input v-model="form.remarkA" placeholder="请输入备注2" :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="12" :sm="8">
            <a-form-model-item label="备注3" prop="remarkB">
              <a-input v-model="form.remarkB" placeholder="请输入备注3" :disabled="cannotEdit|| form.view" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-model-item label="附件">
              <a-upload
                :headers="headers"
                :file-list="fileList"
                list-type="picture-card"
                :customRequest="handleChange"
                :remove='handleRemove'
                :disabled="cannotEdit"
              >
                上传
              </a-upload>
            </a-form-model-item>
            <a-col :span="24">
              <a-card :bordered="false">
                <advance-table
                  :components="drag(columns,'productDetail')"
                  :columnsTitle="'productDetail'"
                  :loading="loading"
                  rowKey="rowKey"
                  size="middle"
                  :columns="columns"
                  :rowClassName="(row,index)=>getRowClassName(row,index,'productList')" 
                  :data-source="productList"
                  :pagination="false"
                  :bordered="true"
                  :row-selection="{ selectedRowKeys: selectedRowKeys,getCheckboxProps:getCheckboxProps, onChange: onSelectChange,hideDefaultSelections:true }"
                >
                  <div class="table-operations" slot="button" style='margin-bottom:0px;'>
                    <div class="table_title">订单明细</div>
                    <a-button type="primary"  @click="handleAddProduct('productList')" v-if='!form.view' v-hasPermi="['biz:bizOrder:add']" >
                      <a-icon type="plus" />新增
                    </a-button>
                    <a-button type="danger" v-if="multiple && !form.view" @click="handleDeleteRows" v-hasPermi="['biz:bizOrder:edit']">
                      <a-icon type="delete" />删除
                    </a-button>
                  </div>

                  <span slot="sort" slot-scope="{record,index}" >
                  <span v-if="index === productList.length - 1">合计</span>
                  <span v-else>
                    <a-icon style="color:#409eff" type="arrow-up" @click="sort(record,index,1)"/>
                    <a-divider type="vertical" />
                    <a-icon style="color:#409eff" type="arrow-down" @click="sort(record,index,2)"/>
                  </span>
                </span>
                  <span slot="operate" slot-scope="{record,index}" >
                      <span v-if="index < productList.length - 1">
                        <a-icon style="color:#409eff" type="copy" @click="copy(record,index,1)"/>
                        <a-divider type="vertical" />
                        <a-icon style="color:#409eff" type="delete" @click="deleteItem(record,index,1)"/>
                      </span>
                  </span>
                  <span slot="numberSlot" slot-scope="{record}">
                    <a-input @change='changeNumber(record)' type='number' placeholder="请输入" v-model="record.number" v-if="!record.disabled" :disabled="cannotEdit || form.view"/>
                    <span v-else>{{ record.number }}</span>
                  </span>

                  <span slot="remarkSlot" slot-scope="{record}">
                  <a-input style="width:150px"  placeholder="请输入备注" v-model="record.remark" v-if="!record.disabled" :disabled="cannotEdit || form.view"/>
                    <span v-else>{{ record.remark }}</span>
                </span>
                  <span slot="priceSlot" slot-scope="{record}">
                  <a-input-number @change='changeNumber(record)'  placeholder="请输入单价" v-model="record.price" v-if="!record.disabled" :disabled="cannotEdit|| form.view"/>
                    <span v-else>{{ record.price }}</span>
                </span>
                  <span slot="amountSlot" slot-scope="{record,index}">
                  <a-input-number  placeholder="请输入金额" v-model="record.amount" v-if="!record.disabled" @change="changeAmount(record,index)" :disabled="cannotEdit|| form.view"/>
                    <span v-else>{{ record.amount }}</span>
                </span>
                  <span slot="areaSlot" slot-scope="{record}">
                  <a-input  placeholder="请输入区域" v-model="record.area" v-if="!record.disabled" :disabled="cannotEdit|| form.view"/>
                    <span v-else>{{ record.area }}</span>
                </span>
                  <span slot="coefficientSlot" slot-scope="{record}">
                  <a-input-number  placeholder="请输入系数" v-model="record.coefficient" @change='changeNumber(record)' v-if="!record.disabled" :disabled="cannotEdit|| form.view"/>
                    <span v-else>{{ record.coefficient }}</span>
                </span>

                  <span slot="unitSlot" slot-scope="{record}">
              <a-select
                :disabled="cannotEdit|| form.view"
                placeholder="请选择单位"
                v-if="!record.disabled"
                v-model="record.unit"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                style="width: 100%"
                allow-clear
                @change='changeUnit(record)'
              >
                <a-select-option v-for="(d, index) in record.unitList" :key="index" :value="d.key">{{ d.name }}</a-select-option>
              </a-select>
               <span v-else>{{ record.unit }}</span>
            </span>
                  <span slot="operation" slot-scope="{record}">
                  <a  @click="handleSubDelete(record)" v-if='!form.view' v-hasPermi="['biz:bizOrder:edit']">
                    删除
                  </a>
                </span>
                </advance-table>
              </a-card>
            </a-col>
            <a-col :span="24">
              <a-card :bordered="false">
                <advance-table
                  :components="drag(columns2,'materialDetail')"
                  :columnsTitle="'materialDetail'"
                  :rowClassName="(row,index)=>getRowClassName(row,index,'materialList')"
                  :loading="loading"
                  rowKey="id"
                  size="middle"
                  :columns="columns2"
                  :data-source="materialList"
                  :pagination="false"
                  :bordered="true"
                  :row-selection="{ selectedRowKeys: selectedDetailRowKeys,getCheckboxProps:getMaterialCheckboxProps, onChange: onSelectDetailChange }"
                >
                  <div class="table-operations" slot="button" style='margin-bottom:0px;'>
                    <div class="table_title">配比物料明细</div>
                    <a-button v-if="!disabled" type="primary" @click="handleAddProduct('materialList')" v-hasPermi="['biz:bizOrder:add']" >
                      <a-icon type="plus" />新增
                    </a-button>
                    <a-button type="danger" v-if="multipleDetail && !disabled" @click="handleDeleteDetailRows" v-hasPermi="['biz:bizOrder:edit']">
                      <a-icon type="delete" />删除
                    </a-button>
                  </div>
                  
                  <span slot="operate" slot-scope="{record,index}" >
                      <span v-if="index < materialList.length -1">
                        <a-icon style="color:#409eff" type="copy" @click="copy(record,index,2)"/>
                        <a-divider type="vertical" />
                        <a-icon style="color:#409eff" type="delete" @click="deleteItem(record,index,2)"/>
                      </span>
                  </span>
                  <span slot="warehouseSlot" slot-scope="{record,index}">
                  <a-select
                    v-if="!record.disabled"
                    :disabled="disabled"
                    placeholder="请选择仓库"
                    v-model="record.warehouseId"
                    @focus="warehouseFocus(record,index)"
                    :getPopupContainer="
                        triggerNode => {
                          return triggerNode.parentNode || document.body
                        }
                      "
                    style="width: 100%"
                    allow-clear
                    @change='selectWarehouse(record,index)'
                  >
                      <a-select-option v-for="(d, index) in record.warehouseIdOptions" :key="index" :value="d.id">{{ d.warehouseName }}</a-select-option>
                    </a-select>
                </span>

                  <span slot="spaceSlot" slot-scope="{record,index}">
                  <a-select
                    v-if="!record.disabled"
                    :disabled="disabled"
                    :key="record.uuid || record.id"
                    placeholder="请选择仓位"
                    v-model="record.spaceId"

                    :getPopupContainer="
                      triggerNode => {
                        return triggerNode.parentNode || document.body
                      }
                    "
                    style="width: 100%"
                    allow-clear
                    @focus="spaceFocus(record,index)"
                    @change='selectSpace($event,record,index)'
                  >
                    <a-select-option v-for="(d, index) in record.spaceList" :key="index" :value="d.id">{{ d.postion }}</a-select-option>
                  </a-select>
                </span>
                  <span slot="number2Slot" slot-scope="{record}">
                    <a-input @change='changeNumber2(record)' type='number' placeholder="请输入" v-model="record.number" :disabled="disabled" v-if="!record.disabled"/>
                    <span v-else>{{ record.number }}</span>
                  </span>
                  <span slot="productType" slot-scope="{record}">
                    <!-- 0-物料 1-补料 2-退料 -->
                    <span v-if="record.productType == 0">物料</span>
                    <span v-if="record.productType == 1">补料</span>
                    <span v-if="record.productType == 2">退料</span>
                  </span>
                </advance-table>
              </a-card>
            </a-col>
          </a-col>
        </a-row>

      </a-spin >
    </a-form-model>
    <!-- <template slot="footer">
         <a-button @click="cancel">
           取消
         </a-button>
         <a-button type="primary" :disabled="false" @click="submitForm(true)">
           保存
         </a-button>
       </template> -->

    <template slot="footer">
      <a-button type="primary" @click="audit(form,2)" v-if="form.auditStatus == 1 && !form.view" v-hasPermi="['biz:bizOrder:audit']">
        审核
      </a-button>
      <a-button type="primary" @click="audit(form,1)" v-if="(form.auditStatus == 2 || (form.orderStatus === '6' && form.orderType === '3'))&&!form.view" v-hasPermi="['biz:bizOrder:audit']">
        反审
      </a-button>
      <a-button type="primary" @click="submitForm(true)" :disabled="disabledSubmit" v-if='!form.view' v-hasPermi="['biz:bizOrder:edit']">
        保存
      </a-button>
      <a-button type="danger" @click="handleDelete(form)"  v-hasPermi="['biz:bizOrder:remove']" v-if="form.id && form.auditStatus == 1&&!form.view">
        删除
      </a-button>
      <a-button @click="cancel">
        取消
      </a-button>
    </template>
  </ant-modal>
</template>
<script>
import BizOrderForm from './BizOrderForm'
export default {
  ...BizOrderForm
}
</script>
<style lang="less" scoped>
.table-operations, body tr.ant-table-expanded-row:hover .table-operations {
  padding-bottom: 8px;
  text-align: right;
}
.table-operations {
  margin-bottom: 16px;
}
.table-operations > button,
.table-operations .ant-input-affix-wrapper{
  margin-right: 8px;
}
.table_title {
  float: left;
  padding-left: 8px;
  font-weight: 600;
  color: #222222;
  line-height: 30px;
}
.multiple_table_row{
    background-color: #ed9090;
    /* color: white; */
  }
  .multiple_table_row:hover{
    color: inherit;
  }
</style>
